let username = document.querySelector("#username");
let email = document.querySelector("#email");
let password = document.querySelector("#password");
let password2 = document.querySelector("#password2");
let button = document.querySelector("button");

function error(input, msg) {
    // input 是改变的节点
    // msg 是改变的提示文案
    let formControl = input.parentNode;
    formControl.className = "form-control error"
    let small = formControl.querySelector('small')
    small.innerHTML = msg;
}

function success(input) {
    // input 是改变的节点
    let formControl = input.parentNode;
    formControl.className = "form-control success";
}

function getKeyword(ele) {
    return ele.placeholder.slice(3);
}

function checkAll(arr) {
    arr.forEach(function(ele) {
        // ele是对应的每个节点
        if (ele.value == '') {
            error(ele, `${getKeyword(ele)}为必填项`);
            // 1.把边框变红
            // 2.small 显示提示，对应的名字为必填项目
        } else {
            //把边框变绿
            success(ele);
        }
    })
}
// 当我们应当把这种重复渲染dom操作封装成对应函数

function checkUsername(input) {
    let reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/g;
    if(input.value == "") {
        error(input, `${getKeyword(input)}为必填项`);
    } else if(reg.test(input.value)) {
        success(input);
    } else {
        error(input, `格式错误`);
    }
}

function checkEmail(input) {
    let reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/g;
    if(input.value == "") {
        error(input, `${getKeyword(input)}为必填项`);
    } else if(reg.test(input.value)) {
        success(input);
    } else {
        error(input, `格式错误`);
    }
}


// 这里的js 是上个版本优化的js
button.addEventListener("click", function(e) {
    e.preventDefault();
    // 1.每个ipt都是需要判断是否为必填项
    // 设计 第一个函数 专门来验证必填项目
    checkAll([username,email,password,password2]) //专门来验证必填项
    // 功能：专门来验证必填项目
    // 参数：需要验证节点


    // 2.每个ipt中都需要不同的正则去做对应的判断
    // 通过调用不同的函数来验证每个ipt的数据有效性
    checkUsername(username);//不验证必填项，只关注username是否有效
    checkEmail(email);
    // checkpassword()
    // 这样子去实现，以后如果多了个ipt的时候，我们只需要添加多一个验证函数即可，
    // 不需要编写麻烦的if...else
});